@value default-blue from 'canvas-editor/styles/theme';
@value default-gray from 'canvas-editor/styles/theme';
@value default-green from 'canvas-editor/styles/theme';
@value default-light-blue from 'canvas-editor/styles/theme';
@value default-orange from 'canvas-editor/styles/theme';
@value default-purple: #a626a4;
@value default-red from 'canvas-editor/styles/theme';

.canvas-block-code-content {
  composes: canvas-block-editable from 'canvas-editor/components/canvas-block-editable/styles';
  color: inherit;
  display: block;
  font-family: inherit;
  font-size: inherit;
  white-space: pre;

  :global {
    .hljs-comment,
    .hljs-quote {
      color: var(--gray, default-gray);
      font-style: italic;
    }

    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
      color: var(--purple, default-purple);
    }

    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
      color: var(--red, default-red);
    }

    .hljs-literal {
      color: var(--blue, default-blue);
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta-string {
      color: var(--green, default-green);
    }

    .hljs-built_in,
    .hljs-class .hljs-title {
      color: var(--orange, default-orange);
    }

    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
      color: var(--orange, default-orange);
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title {
      color: var(--light-blue, default-light-blue);
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: bold;
    }

    .hljs-link {
      text-decoration: underline;
    }
  }
}

.is-empty {
  composes: is-empty from 'canvas-editor/components/canvas-block-editable/styles';
}
